<template>
	<view class="box">
		<!-- #ifdef MP-WEIXIN||MP-ALIPAY -->
		<view class="custom_box">
			<!-- #ifdef MP-WEIXIN -->
			<image class="bgss" :src="baseUrl + '/static/commonimg/bgImg.jpg'" mode="aspectFill"
				:style="{height: statusBarHeight + titleHeight+5 + 'px'}"></image>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view class="custom_addrress" :style="{height: titleHeight + 'px'}">
				<view class="bar_address flex_dq" @click="gosearchadd">
					<image class="dws" :src="baseUrl +  '/static/icon/i_dw.png'" mode="aspectFill"></image>
					<text>{{cityName}}</text>
				</view>
				<view class="bar_input flex_dq">
					<image @click="isScanCode" class="sms" :src="baseUrl + '/static/icon/i_sm.png'" mode="aspectFill">
					</image>
					<text class="camouflage" @click="goSearch">请输入</text>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<image class="indexbg"
				src="https://images.fudiemall.com/storage/default/20250411/BG77ff634c5c493fbb0cb752c7b44d86c703900c11.png"
				mode="aspectFill"></image>
			<view class="custom-nav" :style="{height:titleHeight + statusBarHeight + 'px'}">
				<view class="custom_addrress" :style="{height: titleHeight + 'px',paddingTop:  btnInfoTop + 15 + 'px'}">
					<view class="bar_address flex_dq" @click="gosearchadd">
						<image class="dws" :src="baseUrl +  '/static/icon/i_dw.png'" mode="aspectFill"></image>
						<text>{{cityName}}</text>
					</view>
					<view class="bar_input flex_dq">
						<image @click="isScanCode" class="sms" :src="baseUrl + '/static/icon/i_sm.png'"
							mode="aspectFill">
						</image>
						<text class="camouflage" @click="goSearch">请输入</text>
					</view>
				</view>
			</view>

			<!-- #endif -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view :style="{height: statusBarHeight + titleHeight-30 + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="sticky_box" :style="{top: statusBarHeight + titleHeight + 'px'}">
			<image :src="baseUrl +'/static/commonimg/bgImg.jpg'" mode="aspectFill"></image>
			<view class="sticky_top flex_dq">
				<view class="bar_address flex_dq" @click="gosearchadd">
					<image class="dws" :src="baseUrl +'/static/icon/i_dw.png'" mode="aspectFill"></image>
					<text>{{cityName}}</text>
				</view>
				<view class="bar_input flex_dq">
					<image class="sms" :src="baseUrl +'/static/icon/i_search.png'" mode="aspectFill">
					</image>
					<text class="camouflage" @click="goSearch">请输入</text>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
		<view class="aaaa" :style="{top: statusBarHeight + titleHeight + 'px'}">
			<!-- <image class="bbbb" :src="baseUrl + '/static/commonimg/mask3.jpg'" mode="aspectFill"></image> -->
			<view class="tabs_box">
				<u-tabs :list="classlist" lineColor="#FFC300" @click="clickTabs"></u-tabs>
			</view>
			<view class="tabwrap">
				<view class="tabitem" v-for="item in tablist" :class="{active:item.select}"
					@click="clickToggleHandle(item)">
					{{item.label}}
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="aaaa" :style="{top:pppp-2 + 'px'}">
			<image class="bbbb" :src="baseUrl + '/static/commonimg/mask3.jpg'" mode="aspectFill"></image>
			<view class="tabs_box">
				<u-tabs :list="classlist" lineColor="#FFC300" @click="clickTabs"></u-tabs>
			</view>
			<view class="tabwrap">
				<view class="tabitem" v-for="item in tablist" :class="{active:item.select}"
					@click="clickToggleHandle(item)">
					{{item.label}}
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- 		<view class="tab-nav" >
			<view class="tabwrap">
				<view class="tabitem" v-for="item in tablist" :class="{active:item.select}">
					{{item.label}}
				</view>
			</view>
		</view> -->


		<!-- #ifdef H5 -->
		<view class="mainlist" :style="{top:pppp+ssss+80+ 'px'}" v-for="item in goodsList" :key="item.id"
			@click="goMerchantHome(item.id)">
			<image class="images" :src="item.cover" mode="aspectFill"></image>
			<view class="mainright">
				<view class="name">
					{{item.name}}
				</view>
				<view class="detail">
					<view class="wraps">
						距您{{item.distance?item.distance:"999"}}km内 {{item.classify_name}} {{item.address}}
					</view>
					<!-- <text>￥34/人</text> -->
				</view>
				<view class="rate">
					<view class="">
						<image class="rateimg" v-for="item1 in item.attach.seller_level.level_data.image_data"
							:src="item1" mode="aspectFill"></image>
					</view>
					<text class="c6 f24" v-if="item.sales_volume!=0">已售{{item.sales_volume}}单</text>
				</view>
				<view class="itemss" v-if="item.goods.length>0" v-for="item1 in  item.goods  " :key="item1.id">
					<view class="wrapleft">
						<view class="tag">团</view>
						<text class="price">￥{{item1.price}}</text>
						<text class="content"> {{item1.name}}</text>
					</view>
					<view class="jifen">
						+{{item1.integral_proportion}}%积分
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='1'">
					<view class="wrapleft">
						<view class="tag2">快</view>
						<text class="price">快捷买单</text>
					</view>
					<view class="jifen">
						+{{item.quick_integral_proportion}}%积分
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='0'">
					<view class="wrapleft">
						<view class="tag3">到</view>
						<text class="price">到店消费</text>

					</view>

				</view>
			</view>
		</view>
		<noDatas :xxxList="goodsList" style="margin-top: 500rpx;" :status="status"></noDatas>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN ||MP-ALIPAY -->
		<view class="mainlist" :style="{top: statusBarHeight + titleHeight+20 + 'px'}" v-for="item in goodsList"
			:key="item.id" @click="goMerchantHome(item.id)">
			<image class="images" :src="item.cover" mode="aspectFill"></image>
			<view class="mainright">
				<view class="name">
					{{item.name}}
				</view>
				<view class="detail">
					<view class="wraps">
						距您{{item.distance}}km内 {{item.classify_name}} {{item.address}}
					</view>
					<!-- <text>￥34/人</text> -->
				</view>
				<view class="rate">
					<view class="">
						<image class="rateimg" v-for="item1 in item.attach.seller_level.level_data.image_data"
							:src="item1" mode="aspectFill"></image>
					</view>
					<text class="c6 f24" v-if="item.sales_volume!=0">已售{{item.sales_volume}}单</text>
				</view>
				<view class="itemss" v-if="item.goods.length>0" v-for="item1 in  item.goods  " :key="item1.id">
					<view class="wrapleft">
						<view class="tag">团</view>
						<text class="price">￥{{item1.price}}</text>
						<text class="content"> {{item1.name}}</text>
					</view>
					<view class="jifen">
						+{{item1.integral_proportion}}%积分
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='1'">
					<view class="wrapleft">
						<view class="tag2">快</view>
						<text class="price">快捷买单</text>
					</view>
					<view class="jifen">
						+{{item.quick_integral_proportion}}%积分
					</view>
				</view>
				<view class="itemss" v-if="item.goods.length==0 &&item.quick_pay=='0'">
					<view class="wrapleft">
						<view class="tag3">到</view>
						<text class="price">到店消费</text>

					</view>

				</view>
			</view>
		</view>
		<view v-if="goodsList.length==0" class="empty4">

		</view>
		<view v-if="goodsList.length==0" class="empty4">

		</view>
		<noDatas :xxxList="goodsList" :status="status"></noDatas>
		<!-- #endif -->

		<view class="empty3">

		</view>
	</view>
</template>

<script>
	import {
		classifyindex,
		recommendSeller
	} from "../../api/local.js"
	import {
		geocoder
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				statusBarHeight: 0, // 状态栏高度
				titleHeight: 0, // 标题栏高度
				btnInfoTop: 0, //小程序胶囊距离顶部的距离
				btnInfoleft: 0, //小程序胶囊距离左边的距离
				cityName: '开启定位', //城市
				tablist: [{
						label: "距离优先",
						select: true,
						type: 2
					},
					{
						label: "信誉优先",
						select: false,
						type: 5
					},

					{
						label: "销量优先",
						select: false,
						type: 3
					}

				],
				value: 3,
				pppp: "",
				ssss: "",
				classlist: [],
				page: 1,
				size: 50,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				latitude: "",
				longitude: "",
				sort_type: "",
				goodsList: [],
				types: 2,
				pid: "",
				classify_id: ""
			}
		},
		onLoad(e) {
			this.pid = e.pid
			this.getclass()
			// this.getlist()
		},
		onReady() {
			// #ifdef MP-ALIPAY 
			let navbarInfo = JSON.parse(uni.getStorageSync("navbarInfo"))
			this.statusBarHeight = navbarInfo.statusBarHeight;
			this.btnInfoTop = navbarInfo.btnInfoTop;
			this.titleHeight = navbarInfo.titleHeight;
			// #endif
			// #ifdef MP-WEIXIN
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight;
					const btnInfo = uni.getMenuButtonBoundingClientRect()
					this.titleHeight = (btnInfo.top - this.statusBarHeight) * 2 + btnInfo.height

				}
			})
			// #endif
			// #ifdef H5
			uni.createSelectorQuery().select('.sticky_box').boundingClientRect(data => {
				console.log(Number(data.height) * 2)
				this.pppp = Number(data.height)
			}).exec()
			uni.createSelectorQuery().select('.aaaa').boundingClientRect(data => {
				console.log(Number(data.height) * 2)
				this.ssss = Number(data.height)
			}).exec()
			// #endif
		},
		methods: {
			gosearchadd() {
				uni.navigateTo({
					url: "/pagesMy/groundCat/searchadd"
				})
			},
			goSearch() {
				uni.navigateTo({
					url: "/pagesMy/cloudCat/secondLevelSearch?type=1"
				})
			},
			goMerchantHome(id) {
				console.log(11111);
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantHomepagew?id=' + id
				})
			},
			isScanCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					// onlyFromCamera: true, // 如果需要仅从相机扫码，可以取消注释
					success: function(res) {
						console.log(res, "扫码结果"); // 打印扫码结果，方便调试

						// 获取扫码结果中的 URL
						let url = res.result; // 注意：res.refult 应该是 res.result
						console.log("扫码获取的 URL:", url);

						// 检查 URL 是否存在
						if (url) {
							// 截取 # 之后的内容
							const hashpart = url.split('#')[1] || '';
							const hashpart2 = url.split('=')[1] || '';
							console.log("截取 # 之后的内容:", hashpart);
							// 如果截取到有效内容，跳转到对应页面
							if (hashpart) {
								uni.setStorageSync("quick_pay", hashpart)
								uni.reLaunch({
									url: hashpart
								});
							} else {
								console.error("URL 中没有 # 后的内容");
								uni.showToast({
									title: 'URL 格式不正确',
									icon: 'none'
								});
							}
							if (hashpart2) {
								uni.setStorageSync("pay_code", hashpart2)
							}
						} else {
							console.error("扫码结果中没有 URL");
							uni.showToast({
								title: '扫码失败，请重试',
								icon: 'none'
							});
						}

						// 打印条码类型和内容
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					},
					fail: function(err) {
						console.error("扫码失败:", err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			sss() {
				let that = this;
				uni.getLocation({
					success: function(res) {
						uni.setStorageSync("latitude", res.latitude)
						uni.setStorageSync("longitude", res.longitude)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.page = 1
						that.getlist()
						console.log(res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let data = {
							lat: res.latitude,
							lng: res.longitude,
						};
						geocoder(data).then(res => {
							console.log('逆解析', res)
							if (res.code == 1) {
								that.cityName = res.data.city
								console.log(that.cityName);
								uni.setStorageSync('cityName', that.cityName)
								uni.setStorageSync('addressInfo', res.data)
							}
						})
					},
					fail: function(res) {
						that.latitude = "39.90"
						that.longitude = "116.41"
						that.cityName = "全国"
						uni.setStorageSync("latitude", that.latitude)
						uni.setStorageSync("longitude", that.longitude)
						// this.obtainAddress()
						that.page = 1
						that.getlist()
						console.log(res, "杀杀杀杀杀杀杀杀杀")
					}
				})
			},
			getlist() {
				uni.showLoading({
					title: '加载中',

				});
				let data = {
					page: this.page,
					page_size: this.size,
					latitude: this.latitude,
					longitude: this.longitude,
					sort_type: this.types,
					classify_id: this.classify_id
				};
				recommendSeller(data).then(res => {
					uni.hideLoading();
					console.log('商品列表', res)
					if (res.data.data) {
						let list = res.data.data;
						this.goodsList = this.page == 1 ? list : this.goodsList.concat(list);
						console.log(this.goodsList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					} else {
						this.goodsList = []
					}



				})
			},
			clickToggleHandle(ele) {
				this.types = ele.type
				this.tablist.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				this.page = 1
				this.getlist()
			},
			getclass() {
				classifyindex({
					pid: this.pid
				}).then(res => {
					this.classlist = res.data
					this.classify_id = res.data[0].id
					console.log(this.classify_id)
					if (uni.getStorageSync("cityName")) {
						this.cityName = uni.getStorageSync("cityName")
					}
					if (uni.getStorageSync("longitude")) {
						this.latitude = uni.getStorageSync("latitude")
						this.longitude = uni.getStorageSync("longitude")
						this.page = 1
						this.getlist()
					} else {

						this.sss()
					}
				})
			},
			sel(item) {

				console.log(item)
			},
			// onPageScroll: function(e) {
			// 	const scrollTop = e.scrollTop; 

			// 	if (scrollTop > this.titleHeight) {
			// 		this.titles = '详情';
			// 	} else {
			// 		this.titles = '';
			// 	}
			// },
			clickTabs(item) {
				this.classify_id = item.id
				this.page = 1
				this.getlist()
				console.log('item', item);
			},

		},
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 750rpx;
		height: 1624rpx;
	}

	.ali {
		/* #ifdef MP-ALIPAY */
		margin-top: 30rpx;
		/* #endif */


	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 460rpx;

	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	/deep/.u-notice__swiper__item__text {
		color: #999 !important;
	}

	/deep/.u-notice-bar {
		border-radius: 16rpx;
	}

	.noticebar_box {
		position: relative;
		width: 690rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx !important;
		// padding-top: 30rpx;
	}


	.custom_addrress {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		z-index: 999;
		color: #FFFFFF;
		/* #ifdef MP-ALIPAY */
		margin-left: 30rpx;
		/* #endif */
	}

	.noticebar_box>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 224rpx;
	}

	.bgss {
		position: absolute;
		width: 750rpx;
	}

	.custom-title-box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		padding-bottom: 10rpx;

		opacity: 1;

		.bgss {
			position: absolute;
			width: 750rpx;
			height: 300rpx;
		}

		.title-box {
			// background-color: red;
			display: flex;
			// justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #FFFFFF;

			>image {
				width: 346rpx;
				height: 96rpx;
			}

			.left {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				left: 24rpx;
				bottom: 10rpx;
			}
		}
	}

	.aaaa {
		width: 100%;
		/* #ifdef MP-WEIXIN || MP-ALIPAY */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
		/* #endif */
		/* #ifdef H5 */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		/* #endif */
	}

	.bbbb {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 750rpx;
		height: 200rpx;
	}

	.tabs_box {
		width: 720rpx;
		margin: 0 auto;
		padding: 10rpx 0;
	}



	.tab-nav {
		width: 750rpx;
		height: 224rpx;
		position: fixed;
		z-index: 996;

		>image {
			width: 750rpx;
			height: 224rpx;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.sticky_box {
		position: fixed;
		top: 0;
		width: 750rpx;
		height: 170rpx;
		// background: #ffffff;
		z-index: 999;
	}

	.sticky_box>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.noticebar_box {
		position: relative;
		width: 750rpx;
		padding-top: 30rpx;
	}

	.noticebar_box>image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 224rpx;
	}

	.sticky_top {
		position: relative;
		width: 750rpx;
		z-index: 9;
		/* #ifdef H5 */
		padding-top: 50rpx;
		/* #endif */

		/* #ifdef MP-WEIXIN */
		padding-top: 70rpx;
		/* #endif */
	}

	.bar_address {
		display: flex;
		align-items: center;
		min-width: 160rpx;
		height: 106rpx;
		margin-left: 30rpx;
		position: relative;
	}

	.bar_address>text {
		/* #ifdef MP-WEIXIN  || H5 */
		width: 140rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		max-width: 110rpx;
		margin-right: 10rpx;
		/* #endif */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #333333;
		margin: 0 10rpx;
	}

	.dws {
		width: 22rpx;
		height: 28rpx;
	}

	.bar_input {
		position: relative;
		height: 64rpx;
		background: #ffffff;
		border-radius: 40rpx;
		// margin-left: 24rpx;
	}

	.bar_input::before {
		content: '';
		position: absolute;
		top: 18rpx;
		left: 70rpx;
		transform: translateX(-50%);
		height: 30rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.sms {
		width: 32rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}

	.camouflage {
		/* #ifdef MP-ALIPAY */
		width: 170rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 240rpx;
		/* #endif */
		/* #ifdef H5 */
		width: 400rpx;
		/* #endif */
		margin-left: 36rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.u-demo-block {
		/* #ifdef MP-WEIXIN */
		position: relative;
		top: 0rpx;
		z-index: 996;
		/* #endif */
		/* #ifdef H5 */
		position: relative;
		z-index: 996;
		top: 0px;
		/* #endif */
		width: 700rpx;
		margin: 0 auto;
		min-height: 294rpx;
		padding-bottom: 10rpx;
		// background: linear-gradient(180deg, #FFFFFF 92%, rgba(255, 255, 255, 0) 100%);
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;
			margin-left: 20rpx;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.scroll-list__line__item {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.imageswrap {
		width: 690rpx;
		height: 150rpx;

		>image {
			width: 690rpx;
			height: 150rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
		}

	}

	.swipers {
		position: relative;
		width: 690rpx;
		height: 150rpx;
		margin: 0 auto;
		z-index: 2;
		margin-top: 10rpx;
	}

	/deep/.uni-swiper {
		height: 150rpx;
	}

	.tabwrap {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		z-index: 996;

		.tabitem {
			width: 156rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 102rpx 102rpx 102rpx 102rpx;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 52rpx;
			margin-right: 20rpx;
		}
	}

	.active {
		background: #FCE2A5 !important;
		color: #3D3D3D !important;
	}

	.rate {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.mainlist {
		width: 690rpx;
		min-height: 230rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		padding-bottom: 30rpx;
		position: relative;

		.images {
			margin-top: 20rpx;
			margin-left: 14rpx;
			width: 190rpx;
			height: 190rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.mainright {
			width: 460rpx;
			margin-top: 20rpx;
			margin-left: 20rpx;

			.name {
				width: 420rpx;
				font-weight: 500;
				font-size: 30rpx;
				color: #3D3D3D;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏溢出内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */

			}

			.detail {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;

				.wraps {
					width: 350rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: ellipsis;
				}

				>text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.itemss {
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				.wrapleft {
					display: flex;
					align-items: center;

					width: 320rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					.tag {
						width: 28rpx;
						height: 28rpx;
						background: rgba(253, 48, 63, 0.6);
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag2 {
						width: 28rpx;
						height: 28rpx;
						background: #60CAFE;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.tag3 {
						width: 28rpx;
						height: 28rpx;
						background: #FC6414;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						text-align: center;
						line-height: 28rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}

					.price {
						font-weight: 500;
						font-size: 24rpx;
						color: #E78C4C;
						margin-left: 8rpx;
					}

					.content {
						width: 180rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏溢出内容 */
						text-overflow: ellipsis;
						margin-left: 6rpx;
					}
				}

				.jifen {
					width: 120rpx;
					height: 32rpx;
					background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
					line-height: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.rateimg {
		width: 30rpx;
		height: 30rpx;
		margin: 6rpx;
	}
</style>